<template>
  <div class="all-message">
    <div class="topTitle">
      <div class="title-text">全部消息</div>
    </div>
    <div class="content-main">
      <div class="head header">
        <div style="display: flex;padding-top: 24px;">
          <!-- <div>
            <el-button type="plain" @click="allreadClick">标记已读</el-button>
          </div> -->
          <div class="search-line">
            <span>选择日期：</span>
            <el-date-picker
              v-model="search.daterange"
              style="margin-left: 10px;"
              type="daterange"
              align="right"
              placeholder="选择时间区间"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            />
          </div>
          <div class="search-line">
            <span>所属应用：</span>
            <el-select v-model="search.source" style="margin-left: 10px;" clearable placeholder="所属应用">
              <el-option v-for="item in sysAppInfo" :key="item.id" :label="item.name" :value="item.code" />
            </el-select>
          </div>
          <div class="search-line">
            <span>标题名称：</span>
            <el-input v-model="search.content" placeholder="请输入" style="width: 220px;margin-left: 10px;" />
          </div>
          <div class="search-line">
            <el-button type="primary" icon="el-icon-search" class="searchBtn" @click="queryData(1)">查询
            </el-button>
            <el-button class="deleteBtn" @click="regest">重置
            </el-button>
          </div>
        </div>
        <div style="margin: 24px 0px 0px 24px;">
          <el-button type="primary" class="searchBtn" @click="allreadClick(true)">标记已读
          </el-button>
          <el-button type="primary" class="searchBtn" @click="allreadClick(false)">全部已读
          </el-button>
        </div>
      </div>
      <!-- <div style="border-top: 1px solid rgba(151, 151, 151, 0.3);">
        <div class="goods-check">
          <div class="check-content">
            <el-checkbox-button v-model="checkAll" :indeterminate="isIndeterminate"
              style="margin-left: 15px;margin-top: -2px;" @change="handleCheckAllChange">全部消息类型</el-checkbox-button>
            <el-checkbox-group v-model="msgLevel" @change="handlecheckedItemsChange">
              <el-checkbox-button v-for="(item) in syaTypeList" :key="item.index" :label="item.value">
                {{ item.label }}
              </el-checkbox-button>
            </el-checkbox-group>
          </div>
        </div>
      </div> -->
      <div>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :height="tbHeight"
          :data="tableData"
          style="width: 100%;margin-top:24px"
          :stripe="false"
          :border="false"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45" />
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="title" label="消息标题" width="220" />
          <el-table-column label="消息内容" header-align="center" show-overflow-tooltip align="left">
            <template slot-scope="scope">
              <div style="display: flex;">
                <div v-if="scope.row.state === 0" class="radius" style="margin-left:20px" />
                <div style="margin-left:10px">{{ scope.row.content }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="msgLevelName" label="消息类型" width="220">
            <template slot-scope="scope">
              <div>
                <div v-for="(item,index) in syaTypeList" :key="index">{{ scope.row.msgLevel === item.value ?
                  item.label:'' }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sourceName" label="所属应用" width="220" />
          <el-table-column prop="createTime" width="220" label="创建时间" />
          <el-table-column
            label="操作"
            width="120"
          >
            <template slot-scope="{row}">
              <span v-if="row.ext1 === 'warn'&&row.extend.indexCode" class="textState cursor" @click="openAlarm(row)">告警处置</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <div class=" pageClass">
          <el-pagination
            :current-page="pageNum"
            class="paginaClass"
            :page-sizes="[20, 40, 60, 80]"
            :page-size="pageSize"
            layout="total, prev, pager, next, sizes, jumper"
            :total="total"
            @size-change="changePageSize"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
    <zl-alarm-dispose-dialog ref="dispose" :is-save="false" />
  </div>
</template>
<script type="text/javascript">
import { mapActions, mapState } from 'vuex'
import { alarmDisposeDialog } from '@zl/product'
export default {
  name: 'ReceiveSampleMain',
  components: {
    zlAlarmDisposeDialog: alarmDisposeDialog
  },
  data() {
    return {
      options: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      checkAll: false,
      isIndeterminate: false,
      tableIds: [],
      msgLevel: [],
      tbHeight: 0,
      search: {
        daterange: '' // [new Date(), new Date()]
      },
      syaTypeList: [
        {
          label: '系统消息',
          value: 'system'
        },
        {
          label: '告警消息',
          value: 'message'
        },
        {
          label: '任务消息',
          value: 'task'
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    '$route.query'(val) {
      if (val.type) {
        const map = {
          '1': 'system',
          '2': 'message',
          '3': 'task'
        }
        this.msgLevel = [map[val.type]]
      }
    }
  },
  computed: {
    ...mapState('messageCenter', ['sysAppInfo', 'dicInfo'])

  },
  created() {
    const type = this.$route.query.type
    if (type) {
      const map = {
        '1': 'system',
        '2': 'message',
        '3': 'task'
      }
      this.msgLevel = [map[type]]
    }
    this.queryData(1)
    this.listByUser()
    // this.getDic()
    this.setTableHeight()
  },
  methods: {
    ...mapActions('messageCenter', ['mylist', 'listByUser', 'getDic', 'readMessage']),
    setTableHeight() {
      this.$nextTick(() => {
        this.$set(
          this,
          'tbHeight',
          (document.body.offsetWidth < 1285 ? 230 : 600)
        )
      })
    },
    // 表格选择
    handleSelectionChange(value) {
      value.forEach(element => {
        this.tableIds = value.map(item => { return item.id })
      })
    },
    handleCheckAllChange(val) {
      this.msgLevel = val ? this.dicInfo.map(item => item.value) : []
      this.isIndeterminate = false
      this.queryData(1)
    },
    handlecheckedItemsChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.dicInfo.length
      this.$set(this, 'isIndeterminate', [checkedCount > 0 && checkedCount < this.dicInfo.length, false])
      this.queryData(1)
    },
    // 全部已读按钮
    allreadClick(val) {
      if (this.tableData.length === 0) {
        this.$message.info('无未读消息')
        return
      }
      if (val) {
        if (this.tableIds.length === 0) {
          this.$message.info('请选择消息')
        }
      } else {
        if (this.tableIds.length === 0) {
          this.tableData.forEach(element => {
            this.tableIds = this.tableData.map(item => { return item.id })
          })
        }
      }

      this.readMessage(this.tableIds.join(','))
        .then(res => {
          if (res.data.code !== '0') {
            return
          }
          this.$message.success('操作成功')
          this.queryData(1)
          this.tableIds = []
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    // 修改页码
    changePage(val) {
      this.pageNum = val
      this.queryData()
    },
    // 修改每页长度
    changePageSize(val) {
      this.pageSize = val
      this.queryData(1)
    },
    regest() {
      this.search = {}
      this.queryData(1)
    },
    // 获取列表
    queryData(page) {
      if (page) {
        this.pageNum = page
      }
      var ajaxData = {
        ...this.search,
        msgLevel: this.msgLevel.join(','),
        pageNo: this.pageNum,
        pageSize: this.pageSize,
        startTime: this.search.daterange ? this.search.daterange[0].dateStart() : '',
        endTime: this.search.daterange ? this.search.daterange[1].dateEnd() : ''
      }
      this.loading = true
      delete ajaxData.daterange
      this.mylist(ajaxData)
        .then(res => {
          var data = res.data.data.records
          data.forEach(item => {
            this.dicInfo.forEach(dic => {
              if (item.msgLevel === dic.value) {
                item.msgLevelName = dic.label
              }
            })
            item.extend = JSON.parse(item.extend)
          })
          this.tableData = data
          this.loading = false
          this.total = res.data.data.totalNum
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    openAlarm(row) {
      const extendObj = row.extend
      this.$refs.dispose.open([{ 'id': '',
        indexCode: extendObj.indexCode || extendObj.orgId,
        companyName: extendObj.companyName || extendObj.orgName,
        companyId: extendObj.companyId,
        indexName: extendObj.indexName,
        warnValue: extendObj.warnValue,
        warning: true,
        remark: extendObj.remark || [],
        indexValue: extendObj.indexCode || extendObj.warnValue,
        indexUnit: extendObj.indexUnit,
        dataTime: extendObj.firingTime
      }])
    }
  }
}
</script>
<style lang="scss">
  .textState {
    font-size: 12px;
    color: #3B6CF1;
    margin-right: 15px;
  }
  .all-message {
    .el-table thead {
      th {
        background-color: #E9ECF7;
        border-right: 0px;
        color: #62687f;
        font-size: 13px;
        line-height: 20px;
      }
    }

    .radius {
      width: 10px;
      height: 10px;
      background-color: #F54A45;
      border-radius: 50%;
      margin-top: 7px;
    }

    .check-content {
      line-height: 75px;
      clear: both;

      .el-checkbox-button {
        float: left;
        margin-right: 10px;

        .el-checkbox-button__inner {
          height: 38px;
          line-height: 38px;
          font-size: 16px;
          border-radius: 4px;
          color: #4B4B4B;
          border: 1px solid #e0e0e0;
          padding: 0 10px;
        }
      }

      .el-checkbox-group {
        padding-left: 15px;
      }

      .el-checkbox-button.is-checked .el-checkbox-button__inner {
        color: #FFF;
        background-color: #007AFF;
        border-color: #007AFF;
      }
    }

    .content-main {
      width: 98%;
      background: #ffffff;
      border-radius: 4px;
      box-shadow: 0px 2px 4px 0px #d3d9ec;
      margin: 24px;
      height: 800px;
      overflow: auto;
    }

    .el-button:focus,
    .el-button:hover {
      color: #62687F;
      border-color: #c9d2e7;
      background-color: #ffffff;
    }

    .pageClass {
      text-align: right;
      margin: 15px 0px 24px 0px;
      border-top: 1px solid #E9ECF7;
    }

    .paginaClass {
      height: 50px;
      padding-top: 10px;
      padding-right: 24px;
    }
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #3B6CF1;
    border-color: #3B6CF1;
  }

  .topTitle {
    width: 1920px;
    height: 50px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px #d3d9ec;
  }

  .title-text {
    font-size: 16px;
    font-family: Source Han Sans CN, Source Han Sans CN-Medium;
    font-weight: 600;
    text-align: LEFT;
    color: #252631;
    line-height: 20px;
    padding: 15px 0px 15px 24px;
  }

  .search-line {
    margin-left: 24px;
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: LEFT;
    color: #62687f;
    line-height: 20px;
  }
</style>
